<template>
  <div class="app-container home">
    <query-panel
      :form-data="queryParams"
      @handleQuery="handleQuery"
      label-width="100px"
    >
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="产品名称：" prop="productName">
            <el-input
              v-model="queryParams.productName"
              placeholder="请输入内容"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="年份：" prop="year">
            <el-select
              v-model="queryParams.year"
              style="width: 100%"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="dict in dict.type.product_year"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车辆类别：" prop="vehicleType">
            <el-select
              v-model="queryParams.vehicleType"
              style="width: 100%"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="dict in dict.type.product_vehicle_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="链接节点：" prop="nodeId">
            <treeselect
              class="treeselect"
              style="width: 100%"
              v-model="queryParams.nodeId"
              :options="searchNodeListData"
              :normalizer="normalizer"
              :show-count="true"
              placeholder="请选择"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="语言：" prop="languages">
            <el-select
              v-model="queryParams.languages"
              placeholder="请选择"
              style="width: 100%"
              @change="handleSearchNodeList"
            >
              <el-option
                v-for="item in languages"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </query-panel>
    <table-panel
      ref="tablePanel"
      align="left"
      table-data="/maintain/maintain/productPedigree/list"
      :queryParams="queryParams"
      :columns="columns"
      @onOperate="onOperate"
      :refresh="false"
    >
      <template slot="tableTop">
        <el-button
          class="tableAdd"
          type="primary"
          plain
          size="mini"
          @click="onAdd"
          ><svg-icon icon-class="add_icon" style="width: 18px; height: 16px" />
          新增</el-button
        >
      </template>
      <template #year="{ row }">
        <dict-tag :options="dict.type.product_year" :value="row.year" />
      </template>
      <template #vehicleType="{ row }">
        <dict-tag :options="dict.type.product_vehicle_type" :value="row.vehicleType" />
      </template>
      <template #operate="{ row }">
        <el-button
          size="mini"
          type="text"
          class="ordinary-btn"
          @click="onOperate('编辑', row)"
        >
          编辑
        </el-button>
        <el-button
          size="mini"
          type="text"
          class="ordinary-btn"
          @click="onOperate('删除', row)"
          :disabled="row.status == 2 || row.status == 4"
          ><svg-icon
            icon-class="table-column-delete"
            style="width: 16px; height: 16px"
          />
          删除
        </el-button>
      </template>
    </table-panel>
    <el-dialog
      :title="title"
      :visible.sync="open"
      v-if="open"
      width="458px"
      append-to-body
      :destroy-on-close="true"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-position="left"
        label-width="110px"
        size="mini"
      >
        <el-form-item label="产品名称：" prop="productName">
          <el-input v-model="form.productName" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="年份：" prop="year">
          <el-select
            v-model="form.year"
            style="width: 100%"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="dict in dict.type.product_year"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="车辆类别：" prop="vehicleType">
          <el-select
            v-model="form.vehicleType"
            style="width: 100%"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="dict in dict.type.product_vehicle_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <image-upload
            list-type="picture-card"
            :is-show-tip="false"
            @input="handleImg"
            :value="imgData"
            text="上传图片"
          >
          </image-upload>
        </el-form-item>
        <el-form-item label="链接节点：" prop="nodeId">
          <treeselect
            v-model="form.nodeId"
            :options="addNodeListData"
            :normalizer="normalizer"
            :show-count="true"
            placeholder="请选择所属节点"
            :disabled="selectDisabled"
          />
        </el-form-item>
        <el-form-item label="是否新车：" prop="newCar">
          <el-radio-group v-model="form.newCar" @change="handleAddNodeList">
            <el-radio
              v-for="dict in newOrOld"
              :key="dict.value"
              :label="dict.value"
              >{{ dict.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="语言：" prop="languages">
          <el-radio-group v-model="form.languages" @change="handleAddNodeList">
            <el-radio
              v-for="dict in languages"
              :key="dict.value"
              :label="dict.value"
              >{{ dict.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          size="mini"
          class="tableAdd"
          @click="submitForm"
        >
          确定
        </el-button>
        <el-button
          class="dialogCancel"
          type="primary"
          size="mini"
          @click="open = false"
          >关闭</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TablePanel from "@/components/TablePanel/index.vue";
import QueryPanel from "@/components/QueryPanel/index.vue";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { serachNodeList } from "@/api/nodeManage/node";
import { detailsImg } from "@/api/file/index";
import { add, edit, remove } from "@/api/productMaintenance/index";
export default {
  components: {
    TablePanel,
    QueryPanel,
    Treeselect,
  },
  dicts: ["product_year", "product_vehicle_type"],
  data() {
    return {
      queryParams: {
        productName: "",
        year: "",
        vehicleType: "",
        nodeId: null,
        languages: "1",
      },
      searchNodeListData: [],
      addNodeListData: [],
      languages: [
        {
          value: "1",
          label: "中文",
        },
        {
          value: "2",
          label: "英文",
        },
      ],
      newOrOld: [
        {
          value: "1",
          label: "是",
        },
        {
          value: "2",
          label: "否",
        },
      ],
      columns: [
        {
          field: "productName",
          label: "产品名称",
        },
        {
          field: "year",
          label: "年份",
          slots: { default: "year" },
        },
        {
          field: "vehicleType",
          label: "车辆类别",
          slots: { default: "vehicleType" },
        },
        {
          field: "nodeName",
          label: "链接节点",
        },
        {
          field: "createTime",
          label: "创建时间",
        },
        {
          label: "操作",
          type: "custom",
          width: "200px",
          slots: { default: "operate" },
        },
      ],
      open: false,
      form: {
        productName: "",
        year: "",
        vehicleType: "",
        newCar: "1",
        nodeId: null,
        languages: "1",
        fileId: ""
      },
      title: "新增页面",
      rules: {
        productName: [
          { required: true, message: "产品名称不能为空", trigger: "change" },
        ],
        year: [{ required: true, message: "年份不能为空", trigger: "change" }],
        vehicleType: [
          { required: true, message: "车辆类别不能为空", trigger: "change" },
        ],
        languages: [
          { required: true, message: "语言不能为空", trigger: "change" },
        ],
      },
      selectDisabled: false,
      imgData: [],
    };
  },
  mounted() {
    this.init();
    this.handleQuery();
  },
  methods: {
    async init() {
      await this.getTreeselect();
    },
    // 查询
    handleQuery() {
      this.$refs.tablePanel.getTable();
    },
    // 新增按钮
    onAdd() {
      this.imgData = [];
      this.open = true;
      this.form = {
        productName: "",
        year: "",
        vehicleType: "",
        newCar: "1",
        nodeId: null,
        languages: "1",
        fileId: ""
      };
      if (this.$refs.form) {
        this.$refs.form.resetFields();
      }
    },
    // 文件回调
    handleImg(str) {
      if (typeof res === "boolean") {
        this.form.fileId = "";
      } else {
        this.form.fileId = str.data.fileId;
      }
    },
    // 新增保存
    submitForm() {
      this.selectDisabled = false;
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if(this.title === "编辑") {
            edit(this.form)
            .then((res) => {
              this.$refs.tablePanel.getTable();
              this.$message.success("操作成功！");
              this.open = false;
            })
            .catch((err) => {
              this.$message.error("操作失败！");
            });
          } else {
            add(this.form)
            .then((res) => {
              this.$refs.tablePanel.getTable();
              this.$message.success("操作成功！");
              this.open = false;
            })
            .catch((err) => {
              this.$message.error("操作失败！");
            });
          }
          
        }
      });
    },
    // 表格操作列
    onOperate(type, row) {
      this.selectDisabled = false;
      if (type === "编辑") {
        this.imgData = [];
        this.title = "编辑";
        for (let d in this.form) {
          this.form[d] = row[d];
        }
        this.form.pedigreeId = row.pedigreeId;
        detailsImg({ fileId: row.fileId }).then((response) => {
          this.imgData.push({
            url: response.data.url,
            name: response.data.name,
          });
        });
        this.handleAddNodeList(1);
        this.open = true;
        if (this.$refs.form) {
          this.$refs.form.resetFields();
        }
      } else if (type === "删除") {
        this.$confirm("确认删除吗？").then(() => {
          remove(row.pedigreeId)
            .then((res) => {
              this.$refs.tablePanel.getTable();
              this.$message.success("操作成功！");
            })
            .catch((err) => {
              this.$message.error("操作失败！");
            });
        });
      }
    },
    handleSearchNodeList(data) {
      serachNodeList({ moduleType: 2, languages: data }).then((res) => {
        this.searchNodeListData = res.rows;
      });
    },
    handleAddNodeList(data) {
      serachNodeList({ moduleType: 2, languages: data }).then((res) => {
        this.addNodeListData = res.rows;
      });
    },
    getTreeselect() {
      serachNodeList({ moduleType: 2, languages: 1 }).then((res) => {
        this.searchNodeListData = res.rows;
        this.addNodeListData = res.rows;
      });
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children === null) {
        delete node.children;
      }
      return {
        id: node.nodeId,
        label: node.nodeName,
        children: node.children,
      };
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .cell {
  span {
    font-size: 16px;
  }
  .ordinary-btn {
    width: 80px;
    height: 32px;
    border: 1px solid #dcdcdc;
    font-size: 16px;
    span {
      color: #333333e6;
    }
  }
}
</style>